<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面C</title>
	</head>
	<body>
		<button type="button" onclick="creload();">刷新</button>
	<!-- 	4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			....
		      5.查找每个DIV的子元素和子对象 -->
			  <div id="box1" style="width: 500px; height: 500px; background-color: red;">
				  <p>大盒子</p>
				  <p></p>
			  	<div id="box2" style="width: 300px; height: 300px; background-color: orange;">
			  		<p>中盒子</p>
					<input type="image" />
					<div id="box3" style="width: 250px; height: 250px; background-color:yellow;">
			  			<p>半价盒子</p>
						<textarea rows="" cols="">
							
						</textarea>
						<div id="box4" style="width: 100px; height: 100px; background-color: green;">
			  				<p>小盒子</p>
							<a href="A.html"></a>
			  			</div>
			  		</div>
			  	</div>
			  </div>
			  <button type="button" onclick="Parentelement();">打印父元素</button>
			  <button type="button" onclick="Parentnode();">打印父节点</button><br>
			  <button type="button" onclick="Childelementsandchildnodes();">查找每个盒子的子元素和子节点</button>
	</body>
	<script type="text/javascript">
	 // 1.3 三个页面分别设置三个按钮，实现页面刷新功能
		function creload(){
			location.reload();
		}
	// <------------------------------------------------------->
	function Parentelement(){
		var dbox4 = document.getElementById('box4');
		console.log(dbox4.parentElement);
		console.log(dbox4.parentElement.parentElement);
		console.log(dbox4.parentElement.parentElement.parentElement);
		console.log(dbox4.parentElement.parentElement.parentElement.parentElement);
		console.log(dbox4.parentElement.parentElement.parentElement.parentElement.parentElement);
		console.log(dbox4.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
	}
	function Parentnode(){
		var tbox4 = document.getElementById('box4');
		console.log(tbox4.parentNode);
		console.log(tbox4.parentNode.parentNode);
		console.log(tbox4.parentNode.parentNode.parentNode);
		console.log(tbox4.parentNode.parentNode.parentNode.parentNode);
		console.log(tbox4.parentNode.parentNode.parentNode.parentNode.parentNode);
		console.log(tbox4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
}
	function Childelementsandchildnodes(){
		var vbox1 = document.getElementById('box1');
		var vbox2 = document.getElementById('box2');
		var vbox3 = document.getElementById('box3');
		var vbox4 = document.getElementById('box4');
		
		console.log(vbox1.children);
		console.log(vbox2.children);
		console.log(vbox3.children);
		console.log(vbox4.children);
		console.log('---------');
		console.log(vbox1.childNodes);
		console.log(vbox2.childNodes);
		console.log(vbox3.childNodes);
		console.log(vbox4.childNodes);
	}
	</script>
</html>
